.container {
    position: relative;
}

.img-content {
    position: relative;
    width: 100%;
    height: 300px;
    border: 1px solid lightgray;
    -ms-touch-action: none;
    touch-action: none;
    overflow: hidden;

    .img {
        width: 100%;
        height: 100%;
        transform: rotate(var(--angle)) rotateX(var(--overturnX)) rotateY(var(--overturnY)) scale(var(--scale-ratio)) translate(var(--orginX), var(--orginY)); //30是元素旋转的度数
    }

    // 自定义裁剪框,半透明覆盖非裁剪区域
    .cropbox {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--cropbox-background-opacity);
        clip-path: polygon(var(--cropbox-path));

    }

    /*左上角拖动框*/
    .drag-box {
        width: 30px;
        height: 30px;
    }

    .left-top {
        border-top: 5px solid white;
        border-left: 5px solid white;
    }

    .right-top {
        border-top: 5px solid white;
        border-right: 5px solid white;
    }

    .right-bottom {
        border-bottom: 5px solid white;
        border-right: 5px solid white;
    }

    .left-bottom {
        border-bottom: 5px solid white;
        border-left: 5px solid white;
    }
}

// 延迟
.duration {
    transition-duration: 0.8s;
}

.delay {
    transition-duration: 0.8s;
    transition-delay: 1s;
}

.grid-container-3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: auto auto auto;

}

.grid-container-5 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: auto auto auto auto auto;

}

.grid-item {
    border: 1px solid rgba(255, 255, 255, 0.8);
}

// .shadowboard,
// .clipboard {
//     position: absolute;
//     top: 20px;
//     left: 20px;
//     right: 10px;
//     bottom: 10px;
//     background-color: #d3d0c9;

//     background-size: cover;
//     background-position: center center;
//     transform-origin: 0 0;
//     transform: scale(var(--scale));
//     transition-duration: 0.8s;
// }